<template>
	<el-menu class="el-menu-vertical-demo" v-bind="$attrs" :default-active="defaultActive" :router="router">
		<template v-for="(item, index) in data" :key="index">
			<el-menu-item :index="item.index" v-if="!item.children || !item.children.length">
				<component v-if="item.icon" :is="`el-icon-${toLine(item.icon)}`"></component>
				<span>{{item.name}}</span>
			</el-menu-item>
			<el-sub-menu :index="item.index" v-if="item.children && item.children.length">
				<template #title>
					<component v-if="item.icon" :is="`el-icon-${toLine(item.icon)}`"></component>
					<span>{{item.name}}</span>
				</template>
				<el-menu-item :index="item1.index" v-for="(item1, index) in item.children" :key="index">
					<component v-if="item1.icon" :is="`el-icon-${toLine(item.icon)}`"></component>
					<span>{{item.name}}</span>
				</el-menu-item>
			</el-sub-menu>
		</template>
	</el-menu>
</template>

<script lang="ts" setup name="menus">
	import {
		toLine
	} from '@/utils/main.ts'

	let props = defineProps({
		data: {
			type: Array,
			required: true
		},

		defaultActive: {
			type: String,
			default: ''
		},

		router: {
			type: Boolean,
			default: false
		}
	})
</script>

<style lang="scss" scoped>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}
	
	span {
		padding-left: 5px;
	}
	
</style>
